<template>
  <div id="weather">
    <div class="row row-1"></div>
    <div class="row row-2">
      <div class="row">
        <div class="row">
          <div class="col col-1">
            <div class="row">
              <div class="row">
                <div class="row row-1">
                  <div class="col col-1">
                    <div class="row row-1">
                      <p class="ellipsis">{{ weather.cityName }}</p>
                    </div>
                    <div class="row row-2">
                      <p class="ellipsis">首要污染物：{{ weather.first }}</p>
                    </div>
                    <div class="row row-3">
                      <p class="ellipsis">
                        AQI排行{{ weather.rank }}位&emsp;击败了{{
                          weather.percent
                        }}的城市
                      </p>
                    </div>
                  </div>
                  <div class="col col-2">
                    <div class="row row-1">
                      <p class="ellipsis">{{ weather.aqi }}</p>
                    </div>
                    <div class="row row-2">
                      <p class="ellipsis">AQI</p>
                    </div>
                    <div class="row row-3">
                      <p :class="utils.validateAqi(weather.aqi) + ' ellipsis'">
                        {{ utils.validateAir(weather.aqi) }}
                      </p>
                    </div>
                  </div>
                </div>
                <div class="row row-2">
                  <div class="col col-1">
                    <p class="ellipsis">{{ weather.condition }}</p>
                  </div>
                  <div class="col col-2">
                    <p class="ellipsis">{{ weather.temp }}</p>
                  </div>
                  <div class="col col-3">
                    <p class="ellipsis">{{ weather.windLevel }}</p>
                  </div>
                  <div class="col col-4">
                    <p class="ellipsis">{{ weather.humidity }}</p>
                  </div>
                </div>
                <div class="row row-3">
                  <div class="col col-1">
                    <div class="row row-1">
                      <p class="ellipsis">PM2.5</p>
                    </div>
                    <div class="row row-2">
                      <p
                        :class="utils.validatePm2_5(weather.pm25) + ' ellipsis'"
                      >
                        {{ weather.pm25 }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-2">
                    <div class="row row-1">
                      <p class="ellipsis">PM10</p>
                    </div>
                    <div class="row row-2">
                      <p
                        :class="utils.validatePm10(weather.pm10) + ' ellipsis'"
                      >
                        {{ weather.pm10 }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-3">
                    <div class="row row-1">
                      <p class="ellipsis">NO2</p>
                    </div>
                    <div class="row row-2">
                      <p :class="utils.validateNo2(weather.no2) + ' ellipsis'">
                        {{ weather.no2 }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-4">
                    <div class="row row-1">
                      <p class="ellipsis">SO2</p>
                    </div>
                    <div class="row row-2">
                      <p :class="utils.validateSo2(weather.so2) + ' ellipsis'">
                        {{ weather.so2 }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-5">
                    <div class="row row-1">
                      <p class="ellipsis">CO</p>
                    </div>
                    <div class="row row-2">
                      <p :class="utils.validateCo(weather.co) + ' ellipsis'">
                        {{ weather.co }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-6">
                    <div class="row row-1">
                      <p class="ellipsis">O3</p>
                    </div>
                    <div class="row row-2">
                      <p :class="utils.validateO3(weather.o3) + ' ellipsis'">
                        {{ weather.o3 }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-2">
            <img
              :src="satelliteCloudPicture.url"
              alt=""
              onerror="satelliteCloudPictureUrlError()"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="row row-3">
      <div class="col col-1">
        <div class="row row-1">
          <p class="ellipsis">国控点</p>
        </div>
        <div class="row row-2">
          <div class="col col-1">
            <p class="ellipsis">排名</p>
          </div>
          <div class="col col-2">
            <p class="ellipsis">站点</p>
          </div>
          <div class="col col-3">
            <p class="ellipsis">AQI</p>
          </div>
        </div>
        <div class="row row-3">
          <vue-scroll :ops="ops">
            <div
              class="row"
              v-for="(item, index) in stateStationArray"
              :key="index"
            >
              <div class="col col-1">
                <p class="ellipsis">{{ index + 1 }}</p>
              </div>
              <div class="col col-2">
                <p class="ellipsis">{{ item.station }}</p>
              </div>
              <div class="col col-3">
                <p class="ellipsis">
                  {{ item.aqi }}
                </p>
              </div>
            </div>
          </vue-scroll>
        </div>
      </div>
      <div class="col col-2">
        <div class="row row-1">
          <p class="ellipsis">省控点</p>
        </div>
        <div class="row row-2">
          <div class="col col-1">
            <p class="ellipsis">排名</p>
          </div>
          <div class="col col-2">
            <p class="ellipsis">站点</p>
          </div>
          <div class="col col-3">
            <p class="ellipsis">AQI</p>
          </div>
        </div>
        <div class="row row-3">
          <vue-scroll :ops="ops">
            <div
              class="row"
              v-for="(item, index) in provincialStationArray"
              :key="index"
            >
              <div class="col col-1">
                <p class="ellipsis">{{ index + 1 }}</p>
              </div>
              <div class="col col-2">
                <p class="ellipsis">{{ item.station }}</p>
              </div>
              <div class="col col-3">
                <p class="ellipsis">
                  {{ item.aqi }}
                </p>
              </div>
            </div>
          </vue-scroll>
        </div>
      </div>
      <div class="col col-3">
        <div class="row row-1">
          <p class="ellipsis">局地微站</p>
        </div>
        <div class="row row-2">
          <div class="col col-1">
            <p class="ellipsis">排名</p>
          </div>
          <div class="col col-2">
            <p class="ellipsis">站点</p>
          </div>
          <div class="col col-3">
            <p class="ellipsis">AQI</p>
          </div>
        </div>
        <div class="row row-3">
          <vue-scroll :ops="ops">
            <div
              class="row"
              v-for="(item, index) in cityStationArray"
              :key="index"
            >
              <div class="col col-1">
                <p class="ellipsis">{{ index + 1 }}</p>
              </div>
              <div class="col col-2">
                <p class="ellipsis">{{ item.device.alias }}</p>
              </div>
              <div class="col col-3">
                <p class="ellipsis">
                  {{ item.hourly.aqi }}
                </p>
              </div>
            </div>
          </vue-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getConversionOfWeatherData,
  getStateStationRealtime,
  getProvinceStationRealtime,
  getStationHourlyStatistics,
  getSatelliteCloudPicture
} from "../../axios/api";

export default {
  data() {
    return {
      weather: {},
      ops: {
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#666"
        }
      },
      stateStationArray: [],
      provincialStationArray: [],
      cityStationArray: [],
      satelliteCloudPicture: {
        url: "",
        urlArray: [],
        index: 0
      }
    };
  },
  methods: {
    initData() {
      getConversionOfWeatherData(data => {
        this.weather = data;
      });
      getStateStationRealtime(data => {
        this.stateStationArray = data;
      });
      getProvinceStationRealtime(data => {
        this.provincialStationArray = data;
      });
      getStationHourlyStatistics(data => {
        this.cityStationArray = data;
      });
      this.satelliteCloudPicture = getSatelliteCloudPicture();
    },
    satelliteCloudPictureUrlError() {
      this.satelliteCloudPicture.index += 1;
      if (
        this.satelliteCloudPicture.index >=
        this.satelliteCloudPicture.urlArray.length
      ) {
        this.satelliteCloudPicture.url = "../../assets/img/timg.jpg";
      } else {
        this.satelliteCloudPicture.url = this.satelliteCloudPicture.urlArray[
          this.satelliteCloudPicture.index
        ];
      }
    }
  },
  mounted() {
    this.initData();
  }
};
</script>

<style type="text/stylus" lang="stylus" scoped>
#weather
  position relative
  width 100%
  height 100%

  > .row-1
    height 90px

  > .row-2
    height 401px

    > .row
      padding 30px 0

      > .row
        height 100%

        > .col-1
          width 500px
          height 100%

          > .row
            padding-top 30px

            > .row
              height 100%

              > .row-1
                height 150px

                > .col-1
                  width 330px

                  > .row-1
                    height 70px
                    font-size 40px
                    color #fff

                  > .row-2
                    line-height 45px
                    font-size 20px
                    color #fff

                  > .row-3
                    line-height 35px
                    font-size 20px
                    color #fff

                > .col-2
                  width 155px

                  > .row-1
                    text-align center
                    line-height 60px
                    font-size 60px
                    color #fff

                  > .row-2
                    text-align center
                    line-height 40px
                    font-size 22px
                    color #fff

                  > .row-3
                    padding 5px 0

                    > p
                      width 130px
                      height 40px
                      margin 0 auto
                      border-radius 8px
                      text-align center
                      line-height 40px
                      letter-spacing 1px
                      font-size 21px
                      color #fff

              > .row-2
                height 60px
                line-height 60px
                padding-top 20px

                > .col
                  font-size 24px
                  color #fff

                > .col:nth-of-type(n + 2)
                  margin-left 30px

                  > p
                    padding-left 30px

                  > p::before
                    content ''
                    position absolute
                    top 0
                    left 0
                    width 30px
                    height 70px

                > .col:nth-of-type(2)
                  > p::before
                    background url("../../assets/img/index/20190624134349.png") no-repeat 0 10px
                    background-size 206px 35px

                > .col:nth-of-type(3)
                  > p::before
                    background url("../../assets/img/index/20190624134349.png") no-repeat -84px 10px
                    background-size 206px 35px

                > .col:nth-of-type(4)
                  > p::before
                    background url("../../assets/img/index/20190624134349.png") no-repeat -171px 10px
                    background-size 206px 35px

              > .row-3
                > .col
                  width 68px
                  margin-left 15px

                  > .row-1
                    width 68px
                    text-align center
                    line-height 35px
                    font-size 18px
                    color #fff

                  > .row-2
                    width 68px
                    padding 5px 0

                    > p
                      width 68px
                      height 30px
                      margin 0 auto
                      border-radius 12px
                      text-align center
                      line-height 29px
                      font-size 20px
                      color #fff

                > .col:nth-of-type(1)
                  margin-left 0

        > .col-2
          width 488px
          height 341px
          overflow-y hidden
          padding-left 22px

          > img
            display block
            width 488px

  > .row-3
    padding-top 30px

    > .col
      width 300px

      > .row-1
        line-height 45px
        font-size 26px
        color #fff

      > .row-2
        font-size 18px
        color #fff

        > .col
          text-align center
          line-height 45px

        > .col-1
          width 65px

        > .col-2
          width 150px

        > .col-3
          width 85px

      > .row-3
        height 400px
        font-size 18px
        color #fff
        background-color #042168

        > .__vuescroll
          > .__panel
            > .__view
              > .row
                width 300px
                overflow hidden

                > .col
                  text-align center
                  height 50px
                  line-height 50px

                > .col-1
                  width 65px

                > .col-2
                  width 150px

                > .col-3
                  width 85px

              > .row:nth-of-type(odd)
                background-color #001852

              > .row:nth-of-type(even)
                background-color #042168

    > .col:nth-of-type(n + 2)
      margin-left 55px
</style>
